<template>
	<view class="order_box">
		<!-- head区域 -->
		<view class="head">
			<view class="useraddress">
				<view class="addressinfo" v-if="localBuffer" hover-class="touchOpacity" @click="toAddress">
					<text space="ensp" class="addressinfo_top">{{address.username}} {{address.userphone}}</text>
					<view class="addressinfo_bottom">
						<!-- <uni-tag  size="small" type="error" :inverted="true" :circle="true" text="默认"></uni-tag>
						<uni-tag  size="small" type="error" :inverted="true" :circle="true" text="默认"></uni-tag> -->
						<text class="addressinfo_bottom_status" v-if="address.status ==1">默认</text>
						<text class="addressinfo_bottom_label" v-if="address.label != '' ">{{address.label}}</text>
						<text class="addressinfo_bottom_useraddress">{{address.location+address.useraddress}}</text>
					</view>
				</view>
				<view class="addressinfo" v-else>
					<u-button type="warning" :plain="true" @click="goAddress">+点击完善收货地址</u-button>
				</view>
			</view>
		</view>

		<view class="order_ticket">
			<image src="../../static/images/小u自营.png"></image>
			<text>品牌精选</text>
			<text>以免运费 |</text>
			<text>领券</text>
		</view>
		<!-- 商品信息区域 -->
		<view class="order_view">
			<!-- 明日来写购物车基本信息 -->
			<view class="cartInfochild" v-for="(item,index) in orders" :key="index">
				<!-- 图片 -->
				<image :src="item.img" class="cartInfo_image"></image>
				<!-- 信息 -->
				<view class="cartInfo_info">
					<text>{{item.goodsname}}</text>
					<text>￥
						<text style="font-size: 40rpx;color:#FF6040;">{{item.price}}</text>
					</text>
					<text>七天无理由退货</text>
				</view>
				<!-- 加减数量 -->
				<view class="cartInfo_num">
					<label> ×{{item.num}}</label>
				</view>
			</view>
		</view>

		<!-- 具体详细1 -->
		<view class="resDetail">
			<view hover-class="touchOpacity">
				<label for="" class="resDetail_title">发票类型</label>
				<label for="" style="margin-right:40rpx;color:#333333;font-size: 24rpx;">不开发票 ></label>
			</view>
			<view class="">
				<label for="" class="resDetail_title">售后免邮</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;">部分商家赠送</label>
			</view>
			<view class="">
				<label for="" class="resDetail_title">卖家留言</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;">填写内容需要与商家协商并确认，45字以内</label>
			</view>
		</view>

		<!-- 具体详细2 -->
		<view class="resDetail" style="margin:10rpx 0 98rpx;">
			<view class="">
				<label for="" class="resDetail_title">商品金额</label>
				<label for="" style="margin-right:40rpx;color:#333333;font-size: 24rpx;">￥200</label>
			</view>
			<view class="">
				<label for="" class="resDetail_title">优惠活动</label>
				<label for="" style="margin-right:40rpx;color:#FF6040;font-size: 24rpx;">-￥200</label>
			</view>
			<view hover-class="touchOpacity">
				<label for="" class="resDetail_title">优惠券</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;">更多优惠券 ></label>
			</view>
		</view>
		<!-- 确认订单按钮 -->
		<view class="foot">
			<view class="foot_left">
				<text class="foot_left_count" space="ensp">合计<text>￥{{allPrice}}</text></text>
				<text class="foot_left_ticket" space="ensp">已免运费 <text>已优惠￥100</text></text>
			</view>
			<view class="foot_right" hover-class="touchOpacity" @click="subOrder">确认订单</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				orders: [], //购物车列表
				countmoney: 0,
				countnumber: 0,
				address: {}, //初始化收货地址
				localBuffer: false, //初始化收货地址开关
				idstr: '', //购物车数据id
			}
		},
		onLoad(option) {
			// console.log(option);
			if (option.address) {
				this.address = JSON.parse(option.address);
				console.log(this.address);
				this.getAddress();
			}

			this.getList();
			console.log(this.orders, 123123);
			let str = [];
			this.orders.forEach(item => {
				str.push(item.id)
			})
			this.idstr = String(str);
			// // console.log(String(this.idstr));
			this.countmoney = this.allPrice;
			this.countnumber = this.allNum;
		},
		methods: {
			// 获取购物列表
			getList() {
				this.orders = uni.getStorageSync('cartList');
				// console.log(this.orders);
				// this.countmoney = this.orders.forEach()
			},
			// 跳转地址列表
			goAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				})
			},
			// 获取选中的地址
			getAddress() {
				// console.log(this.address);
				if (this.address) {
					this.localBuffer = true
				} else {
					this.localBuffer = false
				}
			},
			// 点击地址  跳转地址列表
			toAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				})
			},
			// 生成订单
			async subOrder() {
				console.log(this.allPrice);
				// let {
				// 	token,
				// 	uid
				// } = uni.getStorageSync('userInfo')

				console.log(this.countmoney);
				let res = await this.$http({
					url: '/orderadd',
					method: 'post',
					header: {
						authorization: uni.getStorageSync('userInfo').token
					},
					data: {
						uid: uni.getStorageSync('userInfo').uid,
						countmoney: this.countmoney,
						countnumber: this.countnumber,
						addressid: this.address.id,
						idstr: this.idstr
					}
				})
				console.log(res);
				// 提交成功
				if (res.data.code == 200) {
					// this.
					// 跳转你支付页面
					uni.navigateTo({
						url: '/pages/pay/pay?outTradeNo=' + res.data.list.outTradeNo + '&countmoney=' + this
							.countmoney
					})
				}

			}


		},
		computed: {
			// 总价格
			allPrice() {
				// console.log(this.orders);
				let price = 0; //总价格初始值
				this.orders.forEach(item => {
					price += item.num * item.price
				})
				return price
			},
			// 总数量
			allNum() {
				let num = 0; //总数量初始值
				this.orders.forEach(item => {
					num += item.num
				})
				return num;
			}
		}
	}
</script>

<style scoped>
	/* 引入样式 */
	/* @import url("@/static/css/order.css"); */
	/* head区域 */
	.order_box {
		background-color: #f2f2f2;
		height: 100%;
		/* overflow: hidden; */
	}

	.head {
		height: 180rpx;
		width: 100%;
		background: linear-gradient(#FF6040, #FF8A80);
		position: relative;
	}

	.head .useraddress {
		width: 710rpx;
		height: 208rpx;
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		border-radius: 5rpx;
		background-color: white;
	}

	.useraddress .addressinfo {
		/* height: 100%; */
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 40rpx;
	}

	.useraddress .addressinfo .addressinfo_top {
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
	}

	.useraddress .addressinfo .addressinfo_bottom {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #666666;
	}

	.addressinfo_bottom .addressinfo_bottom_status {
		border: 1rpx solid orangered;
		background-color: rgba(221, 100, 89, 0.1);
		color: orangered;
		border-radius: 42%;
		line-height: 35rpx;
		text-align: center;
		width: 70rpx;
		display: inline-block;
		font-size: 22rpx;
	}

	.addressinfo_bottom .addressinfo_bottom_label {
		border: 1rpx solid #2B85E4;
		background-color: rgba(0, 136, 204, 0.1);
		color: #2B85E4;
		border-radius: 42%;
		line-height: 35rpx;
		text-align: center;
		width: 70rpx;
		display: inline-block;
		font-size: 22rpx;
		margin-left: 15rpx;
	}

	.addressinfo_bottom .addressinfo_bottom_useraddress {
		margin-left: 10rpx;
	}

	/* 优惠券区域 */
	.order_ticket {
		position: relative;
		background-color: white;
		width: 100%;
		height: 72rpx;
		margin-top: 60rpx;
	}

	.order_ticket image {
		width: 32rpx;
		height: 32rpx;
		border-radius: 100%;
		position: absolute;
		top: 20rpx;
		left: 20rpx;
	}

	.order_ticket text:nth-of-type(1) {
		position: absolute;
		top: 15rpx;
		left: 60rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.order_ticket text:nth-of-type(2) {
		position: absolute;
		top: 24rpx;
		right: 100rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.order_ticket text:nth-of-type(3) {
		position: absolute;
		top: 24rpx;
		right: 40rpx;
		font-size: 24rpx;
		color: #FF6040;
	}

	/* 商品详情区域 */
	.order_view {
		width: 100%;
		/* height: 100%; */
		/* overflow: hidden; */
		/* height: 100vh */
	}

	/* 	.cartInfo{
			height: 256rpx;
			width: 750rpx;
			vertical-align:top; 
			background-color: white;
		} */
	.cartInfochild {
		height: 256rpx;
		width: 750rpx;
		/* 靠上 */
		vertical-align: top;
		background-color: white;
		display: flex;
		align-items: center;
	}

	.cartInfo_info {
		display: flex;
		flex-direction: column;
	}

	.cartInfo_image {
		width: 216rpx;
		height: 216rpx;
		margin-left: 20rpx;
	}

	.cartInfo_info {
		width: 400rpx;
		margin-left: 20rpx;
	}

	.cartInfo_info text {
		margin-top: 24rpx;
	}

	.cartInfo_info text:nth-of-type(1) {
		font-size: 32rpx;
	}

	.cartInfo_info text:nth-of-type(2) {
		color: #FF6040;
	}

	.cartInfo_info text:nth-of-type(3) {
		width: 170rpx;
		line-height: 32rpx;
		text-align: center;
		font-size: 20rpx;
		color: white;
		background-color: #FF8066;
	}

	.cartInfo_num {
		margin-top: 134rpx;
	}

	.cartInfo_num label {
		line-height: 40rpx;
		text-align: center;
		font-size: 32rpx;
	}

	/* 结果明细 */
	.resDetail {
		width: 100%;
		height: 250rpx;
		background: #FFFFFF;
		padding: 0 20rpx;
		border-bottom: 1px solid #F1F1F1;
		overflow: hidden;
	}

	.resDetail .resDetail_title {
		font-size: 24rpx;
		font-weight: 600;
	}

	.resDetail view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		margin-top: 40rpx;
	}

	/* 提交区域 */
	.foot {
		width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		border-bottom: 1rpx solid #DDD;
	}

	.foot .foot_left {
		width: 270rpx;
		height: 100%;
		padding: 0 0 0 20rpx;
		display: flex;
		flex-direction: column;
	}

	.foot .foot_left .foot_left_count {
		font-size: 32rpx;
		margin-top: 10rpx;
	}

	.foot .foot_left .foot_left_ticket {
		font-size: 20rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	.foot_left_count text {
		color: #FF6040;
		margin-left: 54rpx;
	}

	.foot_left_ticket text {
		margin-left: 54rpx;
	}

	.foot .foot_right {
		width: 220rpx;
		line-height: 98rpx;
		background-color: #FF6040;
		color: white;
		text-align: center;
		font-size: 32rpx;
	}
</style>